<template>
 <el-dialog v-model="dialogTableVisible" title="操作日志" width="1250">
    <div class="form-container">
   <el-form :inline="true" :model="formInline" ref="formReflog" label-width="120px" label-position="right" class="demo-form">
    <el-form-item label="类型" prop="classOther">
        <el-select v-model="formInline.classOther" placeholder="请选择规则" style="width:169px" >
          <el-option v-for="item in Typeoption" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="操作人" prop="labelName">
      <el-input v-model="formInline.labelName" placeholder="请输入" clearable class="right-align-input" />
    </el-form-item>
    <el-form-item label="时间" prop="value2">
        <el-date-picker
        style="width:169px"
        v-model="formInline.value2"
        type="datetimerange"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        format="YYYY-MM-DD HH:mm:ss"
        date-format="YYYY/MM/DD "
      />
    </el-form-item>
    <el-form-item >
      <!-- <div class="flex justify-end gap-2"> -->
        <el-button  style="background-color: #01367A;" type="primary" @click="onSubmit">查询</el-button>
      <el-button    @click="reset">重置</el-button>
    <!-- </div> -->
    </el-form-item>
  </el-form>
</div>
<div class="table">
   <div class="table_heard"> <div class="heard_left">
    <span>数据明细</span>
   </div>
</div>
     
  <el-table :data="tableData"
                border
                v-loading="dataLoading"
                style="width: 100%;margin-bottom: 20px;margin-top: -1px;height: 70vh">
        <el-table-column prop="operationOther" label="类型" min-width="160px">
        </el-table-column>
        <el-table-column prop="operationName" label="名称" min-width="160px">
        </el-table-column>
        <el-table-column prop="operationUser" label="操作人" min-width="100px">
        </el-table-column>
        <el-table-column prop="operationTimeStr"  label="操作时间" min-width="120px">
        </el-table-column>
      
      </el-table>
      <el-pagination
          class="pagination"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-size="size"
          layout="total, prev, pager, next, jumper"
          :total="total"
      />
    </div>
  </el-dialog>
  </template>
  <script setup>
  import { onMounted, reactive,defineProps, ref,defineExpose } from "vue";
  import utils from "@/utils/utils";
  import store from "@/store";
  import {
    createDailyData,
    getAll,
    getPeriodicData,
    getPeriodic,
    getlogsist,
  } from "@/api/work-order";
  import { isSameDate } from "@/utils/common";
  const props = defineProps({
parentData: {
    type: [String, Number, Object], // 依据实际情况设定类型
    default: null
  },
  saveSubmit: {
    type: Function,
    default: () => {
      return Function
    }
  }
})
const OperationUser = store.getters.userInfo.userName
  const dialogTableVisible=ref(false)
  let headers = {};
  const upLoadLoading = ref(false);
  const UploadExcelDialogShow = ref(false);
  const total = ref(0);
  const page = ref(1);
  const size = ref(10);
  const tableData = ref("");
  const dataLoading = ref(false);
  const selectTimeDialogShow = ref(false);
  const timeModelValue = ref("");
  const gkDate = ref("");
  const gkDesc = ref("");
  const formReflog=ref('');
  const formInline = reactive({
    classOther: '',
    labelName: '',
    value2: [],
    
})
const createTypeoption=[
{ value: 'AI创建', label: 'AI创建' },
{ value: '手动创建', label: '手动创建' },
];
const Typeoption=[
  { value: '查询', label: '查询' },
  { value: '新增', label: '新增' },
  { value: '修改', label: '修改' },
  { value: '删除', label: '删除' },
  { value: '导入', label: '导入' },
  // { value: '光伏', label: '光伏' },
  // { value: '服务渠道', label: '服务渠道' },
  // { value: '用电检查', label: '用电检查' },
  // { value: '客户信息查询', label: '客户信息查询' },
  // { value: '停电问题', label: '停电问题' },
  // { value: '电压质量', label: '电压质量' },
  // { value: '电力实施问题', label: '电力实施问题' },
];
const openDialog = (data) => {
    dialogTableVisible.value = true
}
  // const truncateString = (str, maxLength = 10) => {
  //   if (str.length > maxLength) {
  //     return str.substring(0, maxLength) + "...";
  //   }
  //   return str;
  // };
  const reset =()=>{
    formReflog.value.resetFields()  
  }
  const onSubmit =  () => {
    dataLoading.value = true
    let pems ={
        // operationUser:OperationUser,
        operationOther: formInline.classOther,
        operationUser: formInline.labelName,
        operationTimeStart:formInline.value2[0],
        operationTimeEnd:formInline.value2[1],
        page:page.value,
        size:size.value
    }
    getlogsist(pems).then((res)=>{
      tableData.value = res.list
      total.value = res.total
    })
    dataLoading.value = false
  }
  // const getTime = async () => {
  //   gkDate.value = (await getPeriodic()).substring(0, 10);
  // };
  // getTime().then(() => {
  //   getData();
  // });
  
//   const onSubmit =  () => {
//     dataLoading.value = true
//     let val =formInline.province
//     getlogsist().then((res)=>{
//       tableData.value = res.data.content
//       total.value = res.data.content.length
//     })
   
    
//     dataLoading.value = false
//   }
  /**
   * size 改变触发
   */
  const handleSizeChange = currentSize => {
    size.value = currentSize
    onSubmit()
  }
  /**
   * 页码改变触发
   */
  const handleCurrentChange = currentPage => {
    page.value = currentPage
    onSubmit()
  }
  defineExpose({
  openDialog
})
  onMounted(() => {
    headers = { "X-Token": store.getters.token };
  });
  </script>
  <style scoped >
  .form-container {
    padding: 20px;
  }
  
  .table_heard{
    height: 45px;
    width:100%;
    border:1px solid #d9dbe2  ;
    border-radius:3px;
    display: flex;
    justify-content: space-between;
}
.heard_left{
    padding: 10px
}

  /* 查询按钮容器样式 */
.query-button-container {
  display: flex;
  justify-content: flex-end;
  /* margin-top: 20px; */
}
  /* 输入框右对齐样式 */
  .right-align-input {
  display: flex;
  justify-content: flex-end;
}
  /* 响应式布局 */
  @media (max-width: 768px) {
    .demo-form {
      label-width: 80px;
    }
  }
  @media (max-width: 576px) {
    .demo-form {
      label-width: 60px;
    }
  }
  </style>  